<template>
	<view class="settle-container">
		<!-- 左侧全选按钮 -->
		<view class="left">
			<label class="radio" @click="changeAllGoodsState">
				<radio color="#C00000" :checked="isFullChecked" /><text>全选</text>
			</label>
		</view>
		<!-- 中间总价格 -->
		<view class="center">
			<text>合计：</text>
			<text class="price">￥{{ checkedGoods.money.toFixed(2) }}</text>
		</view>
		<!-- 右侧结算按钮 -->
		<view class="right">
			<button type="default" class="button" @click="settleGoods">结算({{ checkedGoods.count }})</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState('my_cart', ['cart']),
			...mapState('my_user', ['address', 'token']),
			...mapGetters('my_cart', ['checkedGoods']),
			// 是否全选
			isFullChecked() {
				// 已勾选的商品
				const checkedGoods = this.cart.filter(item => item.goods_state)
				if (checkedGoods.length === this.cart.length) {
					return true
				} else {
					return false
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			...mapMutations('my_cart', ['updataCartState']),
			...mapMutations('my_user', ['saveTargetInfo']),
			// 全选框点击
			changeAllGoodsState() {
				this.updataCartState(!this.isFullChecked)
			},
			// 点击结算按钮
			async settleGoods() {
				// 没有勾选商品
				if (this.checkedGoods.count === 0) return uni.$showMsg('请选择需要结算的商品！')
				// 没有添加地址
				if (JSON.stringify(this.address) === '{}') return uni.$showMsg('请选择收货地址！')
				// 没有登录
				if (this.token === '') {
					// 询问用户是否去登录
					const [err, succ] = await uni.showModal({
						title: '提示',
						content: '检测到您未登录，是否去登录？'
					}).catch(err => err)

					if (succ && succ.confirm) {
						this.saveTargetInfo({from:'cart',to:'my',type:'pay'})
						uni.switchTab({
							url: '/pages/my/my'
						})
					}
				}

			}
		}
	}
</script>

<style lang="scss">
	.settle-container {
		/* 底部固定定位 */
		position: fixed;
		bottom: 0;
		left: 0;
		/* 设置宽高和背景色 */
		width: 100%;
		height: 100rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10rpx;
		font-size: 28rpx;
		border-top: 2rpx solid #efefef;

		.left {
			.radio {
				display: flex;
				align-items: center;
			}
		}

		.center {
			.price {
				color: #c00000;
			}
		}

		.right {
			margin-right: 30rpx;

			.button {
				height: 80rpx;
				min-width: 200rpx;
				background-color: #c00000;
				color: white;
				line-height: 80rpx;
				text-align: center;
				padding: 0 20rpx;
			}

		}
	}
</style>
